import router from './router'
import nProgress from 'nprogress'
import 'nprogress/nprogress.css'
import store from './store'
import { asyncRouters } from './router/index'

/**
 * 更改进度条右侧的圆环
 */

nProgress.configure({
  showSpinner: false // 不显示加载时得小圆圈
})

/**
 * 在路由中设置前置守卫
 */
const whiteList = ['/login']
router.beforeEach(async(to, from, next) => {
  nProgress.start()
  const token = store.getters.token
  // 如果有token
  if (token) {
    // 如果即将去login，就进入到首页
    // 当token存在时，如果要进入的路径是/login，则通过 next('/') 导航到首页路径/，
    // 同时使用 nProgress.done() 清除进度条；如果要进入的不是/login路径，则使用 next() 正常进入目标路由。

    // 最终理解: 即，首先有token，想要去往login，那么不好意思，既然有了token，按照正常逻辑就不需要去login了
    // 所以就next('/)到了首页
    if (to.path === '/login') {
      next('/')
      // 细节1： 一旦拦截就不会进入后置守卫,所以需要清除进度条
      nProgress.done()
    } else {
      // 为了避免在各大导航页面跳转时重复获取数据
      if (!store.getters.userInfo?.userId) {
        // 从这里开始获取用户信息
        // console.log(store.dispatch('user/getUserInfo'))
        const { roles } = await store.dispatch('user/getUserInfo')
        // 遍历动态路由的中name，通过不同角色的登录，查询不同的权限。
        // 进而达到不同的角色，根据自身权限的不同，可以查看不同的界面
        const filterRouters = asyncRouters.filter(item =>
          roles.menus.includes(item.name)
        )
        store.commit('user/SET_ROUTES', filterRouters)
        // 筛选后的路由,传入到router
        // 为什么在加到静态路由的后面，加入{ path: '*', redirect: '/404', hidden: true }
        // 是因为，路由是按顺序加入到静态路由的
        // 所以，为了保证404在最后面，所以在后面再加一次
        router.addRoutes([...filterRouters, { path: '*', redirect: '/404', hidden: true }])
        // router添加动态路由之后 需要转发一下
        next(to.path) // 目的是让路由拥有信息 router的已知缺陷
      }
      next()
    }
  } else {
    // 如果没有token
    if (whiteList.includes(to.path)) {
      // 如果白名单中的路由即，即将去往login
      next()
    } else {
      // 如果不是白名单中即，没有token非login页，那么就需要进入login，进行登录
      next('/login')
      // 跳转之后就会关闭进度条
      nProgress.done()
    }
  }
})

/**
 * 在路由中设置后置守卫
 */

router.afterEach(() => {
  nProgress.done()
})
